'use client'
import { fetcher } from '../../../../libs'
import useSWR from 'swr'

export default function Detail({params}: {params:{id :number}}) {
    const {data: region, isLoading, error}  = useSWR(`/region/${params.id}`,fetcher)
    if(isLoading) return <div><span>Loading...</span></div>
    if (!region) return null;
    return (
        <div className='w-full'>
            <h2 className='text-center font-bold text-3xl py-3'>{region.result.Name}</h2>

            <div className='w-full max-w-4xl m-auto border-[1px] p-3 border-gray-500 rounded-md'>
                <p>Region Type: {region.result.RegionType}</p>
                <p>Latitude: {region.result.Latitude}</p>
                <p>Longitude: {region.result.Longitude}</p>
                <p>Parent Region ID: {region.result.ParentRegionId}</p>
            </div>
        </div>
    )
}